<template>
  <div>
    <div class="name">创建任务</div>
    <el-card
      class="mt20"
      style="overflow: visible !important;"
    >
      <div class="steps">
        <el-steps
          :active="currentStep"
          align-center
        >
          <el-step title="选择场景">
          </el-step>
          <el-step title="选择基础配置">
          </el-step>
          <el-step title="上传资源"></el-step>
          <el-step title="选择工作流"></el-step>
          <el-step title="选择方案"></el-step>
        </el-steps>
      </div>
      <div class="form-main">
        <step0
          ref="Step0"
          v-show="currentStep===0"
          v-model="form0"
        ></step0>
        <step1
          ref="Step1"
          v-show="currentStep===1"
          v-model="form1"
        ></step1>
        <step2
          ref="Step2"
          v-show="currentStep===2"
          v-model="form2"
        ></step2>
        <step3
          ref="Step3"
          v-show="currentStep===3"
          v-model="form3"
          :projectCode="form1.projectCode"
        ></step3>
        <step4
          ref="Step4"
          v-if="currentStep===4"
          :projectCode="form1.projectCode"
          :processDefinitionCode="form3.processDefinitionCode"
          :taskInfo="form1"
        ></step4>
      </div>
    </el-card>
    <div class="footer-bar">
      <el-button
        type="primary"
        plain
        size="small"
        @click="$router.go(-1)"
        :disabled="loading"
      >取消</el-button>
      <el-button
        v-if="currentStep>0"
        type="primary"
        plain
        size="small"
        @click="up"
        :disabled="loading"
      >上一步</el-button>
      <el-button
        v-if="currentStep<4"
        type="primary"
        size="small"
        @click="next"
      >下一步</el-button>
      <el-button
        v-if="currentStep===4"
        type="primary"
        size="small"
        @click="onCreate"
        :loading="loading"
      >算力分配</el-button>
    </div>

  </div>
</template>

<script>
  import { findComponentDownward } from '@/module/util/'
  import { sleep } from '@/module/util/util'
  import store from '@/conf/home/store'
  import step0 from './step0'
  import step1 from './step1'
  import step2 from './step2'
  import step3 from './step3'
  import step4 from './step4'
  export default {
    components: {
      step0,
      step1,
      step2,
      step3,
      step4
    },
    data () {
      return {
        store,
        loading: false,
        currentStep: 0,
        form0: {},
        form1: {},
        form2: {},
        form3: {},
        form: {
          processInstancePriority: 'MEDIUM',
          failureStrategy: 'CONTINUE',
          warningGroupId: 0,
          taskDependType: 'TASK_POST',
          runMode: 'RUN_MODE_SERIAL',
          dryRun: 0,
          warningType: 'NONE'
        }
      }
    },
    computed: {
      formData () {
        return { ...this.form }
      },
      nodeInfo () {
        let { centerNode, nodeList } = this.form1
        return { centerNode, nodeList }
      }
    },
    methods: {
      up () {
        this.currentStep--
      },
      next () {
        let index = this.currentStep
        this.$refs[`Step${index}`].validate().then(res => {
          // if (this.currentStep === 0) {
          // }
          this.currentStep++
        })
      },
      async onCreate () {
        let { scene } = this.form0
        let { projectCode } = this.form1
        let { processDefinitionCode } = this.form3
        this.$refs.Step4.validate().then(async res => {
          findComponentDownward(this.$root, 'app')._showLoading(true, '正在创建实例...')
          let param = {
            processInstancePriority: 'MEDIUM',
            failureStrategy: 'CONTINUE',
            warningGroupId: 0,
            taskDependType: 'TASK_POST',
            runMode: 'RUN_MODE_SERIAL',
            dryRun: 0,
            warningType: 'NONE',
            projectCode,
            processDefinitionCode,
            scene: scene === '大数据计算' ? 0 : scene === '科学计算' ? 1 : scene === '智能计算' ? 2 : ''
          }
          this.store.dispatch('dag/processStart', param).then(async res => {
            await sleep(3000)
            findComponentDownward(this.$root, 'app')._showLoading(false)
            this.$message.success('创建成功')
            this.$router.push({ name: 'projects-instance-list', params: { projectCode } })
          }).catch(e => {
            this.$message.error(e.msg || '')
          })
        })

        // this.$emit('success', { projectCode, processDefinitionCode, centerNode: this.form1.centerNode })
        // let queryString = qs.stringify(param)
        // io.post(`projects/${projectCode}/process-definition/createByUser?${queryString}`, res => {
        //   this.loading = false
        //   if (res.code === 0) {
        //     this.$message.success('创建成功')
        //     let processDefinitionCode = res.data
        //     this.$emit('success', { projectCode, processDefinitionCode })
        //   } else {
        //     this.$message.error(res.msg)
        //   }
        // }).catch(e => {
        //   this.loading = false
        //   console.error(e)
        // })

        // /dolphinscheduler/projects/{projectCode}/process-definition/createByUser
        // this.store.dispatch('dag/processStart', param).then(res => {
        //   this.loading = false
        //   this.$message.success(res.msg)
        //   this.$emit('success', { projectCode })
        // }).catch(e => {
        //   this.loading = false
        //   this.$message.error(e.msg || '')
        // })
      }
    }
  }
</script>

<style lang="scss" scoped>
.name {
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  color: #333333;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  img {
    margin-right: 5px;
  }
}
.steps {
  border-bottom: 1px dashed #cccccc;
  margin-bottom: 25px;
  padding: 0 0px 20px 0px;
}
::v-deep.el-button {
  min-width: 80px;
}
::v-deep .el-steps {
  margin: 0 -10%;
}
::v-deep .el-card {
  margin-bottom: 60px;
}
.form-main {
  min-height: 300px;
}
.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 40px;
  background: #ffffff;
  box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.25);
  text-align: right;
  z-index: 9999;
}
</style>
